<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>拖放排序</title>
    <style>

        .container {
            border: 1px solid red;
            height: 450px;
            padding: 10px;
            position: relative;
        }

        .component {
            margin: 50px 10px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid black;
            float: left;
            overflow: hidden;
            -ms-touch-action:none;
            -ms-user-select:none;
        }

        .header {
            cursor: move;
            border: 1px solid black;
            height: 20px;
            line-height: 20px;
        }

        #drop, #drop3 {
            border: 1px solid green;
            height: 130px;
            line-height: 100px;
        }

        #c31.ks-dd-dragging {
            visibility: hidden;
        }

        .ks-dd-drag-over {
            background: #a52a2a;
        }

        .ks-dd-drop-over {
            background: #fa8072;
        }

        #container3 .component .header {
            cursor: move;
        }
    </style>
    <link rel="stylesheet" href="/kissy/src/css/assets/dpl/base.css"/>
</head>
<body>

<h2>交换排序</h2>


<div id="container2" class="container ks-clear">

    <div id="c11" class="component">
        <div class="header">
            拖动头
        </div>
        1 intersect drag
    </div>

    <div id="c21" class="component">
        <div class="header">
            拖动头
        </div>
        2 point drag
    </div>

    <div id="c31" class="component" style="width:250px">
        <div class="header">
            拖动头
        </div>
        3 point drag with proxy
    </div>
</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    var S = KISSY;

    KISSY.use("node,util,dd,dd/plugin/proxy", function (S, Node,util, DD, Proxy) {
        var DDM = DD.DDM,
                $ = Node.all,
                Draggable = DD.Draggable,
                Droppable = DD.Droppable;
        /**
         * 拖放排序
         */
        var p = new Proxy({
            /**
             * 如何产生替代节点
             * @param drag 当前拖对象
             */
            node: function (drag) {
                var n = $(drag.get("dragNode").clone(true));
                n.attr('id', util.guid("ks-dd-proxy"));
                n.css("opacity", 0.2);
                return n;
            },
            // dragNode do not move , just change position among dom tree
            moveOnEnd: 0
        });

        var c11 = new Draggable({
            node: "#c11",
            move: 1,
            //模式，
            // intersect :区域相交就算enter
            // strict : drag 区域完全在 drop 区域内才算
            // point : 鼠标在 drop 区域内
            //默认 point
            mode: Draggable.DropMode.INTERSECT,
            handlers: ["#c11 .header"]
        });
        new Droppable({node: "#c11"});

        var c31 = new Draggable({
            node: "#c31",
            move: 1,
            handlers: ["#c31 .header"]
        });
        new Droppable({node: "#c31"});
        c31.plug(p);

        var c21 = new Draggable({
            node: "#c21",
            move: 1,
            mode: Draggable.DropMode.POINT,
            handlers: ["#c21 .header"]
        });
        new Droppable({node: "#c21"});

        function onDropHit(ev) {
            var drag = ev.drag,
                    dragNode = drag.get('dragNode'),
                    drop = ev.drop,
                    dropNode = drop.get('node');
            dragNode.css({
                position: "",
                left: "",
                top: ""
            });
            var tmp = $("<div>").insertBefore(dropNode),
                    dropParent = dropNode[0].parentNode;
            dragNode[0].parentNode.replaceChild(dropNode[0], dragNode[0]);
            dropParent.replaceChild(dragNode[0], tmp[0]);
        }

        c21.on("dragdrophit", onDropHit);
        c11.on("dragdrophit", onDropHit);
        c31.on("dragdrophit", onDropHit);

        DDM.on("dragdropmiss", function (ev) {
            var drag = ev.drag;
            drag.get("dragNode").css({
                position: "",
                left: "",
                top: ""
            });
        });
    });
</script>
</body>
</html>